<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            position: absolute;
            left:100px;
            top:100px;
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        /**
         * linear作用：匀速运动距离公式
         * 
         * t : 运动了多长时间了
         * b ：begin开始的位置
         * s : 要运动的距离(目标位置-开始的位置)
         * d : 运动的总时长
         * 
         */
        function linear(t, b, s ,d ){
            return s / d * t + b;
        }

        var oBox = document.querySelector('#box');
        var t = 0;// 运动的时间
        var timeStep = 10; // 运动的时间间隔
        var target = 500;// left 目标位置
        var duration = 5000;// 运动的总时长
        var begin = parseFloat(getComputedStyle(oBox,null).left); // 获取开始位置并转化成数字
        var s = target - begin;

        var timer = null;

        timer = setInterval(()=>{
            // 1. 累加时间间隔
            t += timeStep;
            // 2. 判断停止条件
            if(t >= duration){
                // 1 。到达目标位置后，清除定时器
                clearInterval(timer);
                // 2. 让位置就是目标位置
                oBox.style.left = target + 'px';
                return;
            }
            // 3. 给元素属性赋值
            var nowLeft = linear(t, begin, s, duration);
            oBox.style.left = nowLeft + 'px';
        },timeStep);


    </script>
</body>
</html>